<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇小游戏</title>
    <link rel="stylesheet" href="snake.css">
    <script src="jquery-3.6.0.js" type="text/javascript"></script>
    <script src="snake.js" type="text/javascript"></script>
</head>

<body>
    <div class="snakePage">

        <div class="score">
            <div class="title">
                <div class="titletext">移动互联网导论<br/>贪吃蛇小程序改网页</div>
            </div>
            <div class="scoredetail1">
                <div class="scoredesc">得分 :
                    <span class="scorenum">0</span>
                </div>
            </div>
            <div class="scoredetail2">
                <div class="scoredesc">最高 :
                    <span class="maxscorenum">0</span>
                </div>
            </div>
        </div>

        <div class="funcarea">
            <div class="pausearea">
                <!-- 绑定了snakefunc -->
                <button class="pausebtn1" onclick="snakefunc(this)" style="width: 100%;">开始</button>
            </div>
            <div class="directionarea">
                <div class="dbtn0">
                    <div class="dbtntop">w</div>
                </div>
                <div class="dbtn12">
                    <div class="dbtnleft">a</div>
                    <div class="dbtnright">d</div>
                </div>
                <div class="dbtn3">
                    <div class="dbtnbottom">s</div>
                </div>
                <script type="text/javascript">
                    $(".dbtnleft").click(function() {
                        clickdir("left")
                    })
                    $(".dbtnright").click(function() {
                        clickdir("right")
                    })
                    $(".dbtntop").click(function() {
                        clickdir("top")
                    })
                    $(".dbtnbottom").click(function() {
                        clickdir("bottom")
                    })
                </script>

            </div>
        </div>

        <!-- onselectstart很重要!!! -->
        <div class="playarea" onselectstart="return false">
            <script type="text/javascript">
                var playarea = $(".playarea")
                playarea.mousedown(function(e) {
                    tapStart(e)
                })
                playarea.mousemove(function(e) {
                    tapMove(e)
                })
                $("body").keypress(function(e) {
                    presskey(e)
                })
            </script>

            <!-- hidden -->
            <div class="bigin_v">
                <div class="bigin_v_ms">
                    鼠标点击拖拽或点击按钮控制小蛇
                </div>
            </div>
            <!-- <div class="rows" wx:for="{{ground}}" wx:for-item="gCols">
                <div class="block block_type_{{item}}"></div>
            </div> -->
            <div class="ground">
                <!-- <div class="block block_type_{{item}}"></div> -->
            </div>
        </div>
        <div>
            <div>
                <div class="detail">最近更新于2022/01/11</div>
                <div class="detail">作者:19030100152易港豪||联系QQ 2457546190</div>
            </div>
        </div>
    </div>



    </div>
</body>

</html>